<!DOCTYPE html>
<html>


	<head lang="zh-CN">
		<title>医疗支出占国内生产总值比重及人均医疗支出</title>

		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

		<meta charset="utf-8">

		<!-- 引入Jquery -->
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

		<!-- 引入Bootstrap -->
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

		<!-- 引入BootStrap-table -->
		<link rel="stylesheet" href="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.css">
		<script src="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.js"></script>

		<!-- 引入Bootstrap-paginator -->
		<script src="../assets/libs/bootstrap-paginator-master/build/bootstrap-paginator.min.js"></script>

		<!-- 引入Echarts -->
		<script src="../assets/libs/echarts/echarts.min.js"></script>
	</head>

	<body>
		<div class="container">
			<div>
				<ul class="nav nav-tabs">
				    <li role="presentation" id="tableTag"><a href="javascript:;" onclick="showTable()">&nbsp;<span class="glyphicon glyphicon-th-large"></span>&nbsp;</a></li>
				    <li role="presentation" id="imageTag"><a href="javascript:;" onclick="showImage()">&nbsp;<span class="glyphicon glyphicon-tasks"></span>&nbsp;</a></li>
				</ul>
			</div>

			<div id="tableView">
				<div class="page-header" style="text-align: center;">
					<h3>医疗支出占国内生产总值比重及人均医疗支出</h3>
					<br>
					<h4 style="margin-top: -20px;">Health Expenditure,Total as Percentage of GDP and Health Expenditure per Capital</h4>
				</div>
				<table class="table table-hover table-striped">
					<tr>
						<td style="text-align: center;">国家</td>
						<td>时间</td>
						<td>医疗支出占国内生产总值比重(%)</td>
						<td>人均医疗支出(元)</td>
					</tr>

					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">阿尔巴尼亚</td>
						<td>2005</td>
						<td>6.11631076</td>
						<td>166.22792891</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>5.33503501</td>
						<td>219.27385748</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>5.88310543</td>
						<td>272.20429151</td>
					</tr>


					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">爱沙尼亚</td>
						<td>2005</td>
						<td>5.01934025</td>
						<td>514.22144</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>6.24878186</td>
						<td>902.6732824</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>6.37929421</td>
						<td>1248.279632</td>
					</tr>

					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">保加利亚</td>
						<td>2015</td>
						<td>7.07978092</td>
						<td>274.97337317</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>7.24456053</td>
						<td>488.21206822</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>8.44291326</td>
						<td>661.84652732</td>
					</tr>

					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">波兰</td>
						<td>2005</td>
						<td>6.20353532</td>
						<td>494.7032382</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>6.88449165</td>
						<td>867.7452921</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>6.35024637</td>
						<td>910.2837803</td>
					</tr>

					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">黑山</td>
						<td>2005</td>
						<td>8.46232483</td>
						<td>310.0002215</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>6.90181545</td>
						<td>456.6293165</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>6.41654268</td>
						<td>457.6649363</td>
					</tr>

					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">捷克</td>
						<td>2005</td>
						<td>6.93394326</td>
						<td>884.3635966</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>7.4318989</td>
						<td>1410.036589</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>7.41091154</td>
						<td>1378.521202</td>
					</tr>

					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">克罗地亚</td>
						<td>2005</td>
						<td>6.89409977</td>
						<td>726.5228298</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>8.24785313</td>
						<td>1143.851235</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>7.80324176</td>
						<td>1050.334391</td>
					</tr>

					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">拉脱维亚</td>
						<td>2005</td>
						<td>6.37415759</td>
						<td>455.8426296</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>6.55480303</td>
						<td>739.3775279</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>5.88069354</td>
						<td>920.7037654</td>
					</tr>


					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">立陶宛</td>
						<td>2005</td>
						<td>5.83432657</td>
						<td>453.8766165</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>7.09033823</td>
						<td>828.6518049</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>6.55211709</td>
						<td>1063.421183</td>
					</tr>

					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">罗马尼亚</td>
						<td>2005</td>
						<td>5.46905767</td>
						<td>255.2853935</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>5.83283431</td>
						<td>482.9457049</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>5.56500913</td>
						<td>556.8096847</td>
					</tr>

					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">马其顿</td>
						<td>2005</td>
						<td>7.95350493</td>
						<td>243.7299768</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>6.83334032</td>
						<td>312.2201208</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>6.47637457</td>
						<td>353.9253425</td>
					</tr>
					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">塞尔维亚</td>
						<td>2005</td>
						<td>8.70154867</td>
						<td>304.7540901</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>10.08880983</td>
						<td>541.0249331</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>10.36881192</td>
						<td>632.9248415</td>
					</tr>
					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">斯洛伐克</td>
						<td>2005</td>
						<td>7.04485118</td>
						<td>628.1035841</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>8.50861648</td>
						<td>1377.726433</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>8.05404755</td>
						<td>1454.81013</td>
					</tr>
					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">斯洛文尼亚</td>
						<td>2005</td>
						<td>8.49586245</td>
						<td>1519.549813</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>9.06859821</td>
						<td>2083.059184</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>9.23388628</td>
						<td>2160.746701</td>
					</tr>
					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">匈牙利</td>
						<td>2005</td>
						<td>8.27979357</td>
						<td>922.784017</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>7.85048555</td>
						<td>1019.851688</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>7.40078093</td>
						<td>1036.623859</td>
					</tr>

					<tr>
						<td rowspan="3" style="font-size:1.5em;text-align: center;display: table-cell;vertical-align: inherit;">波黑</td>
						<td>2005</td>
						<td>8.49615182</td>
						<td>248.7893982</td>
					</tr>
					<tr>
						<td>2010</td>
						<td>9.57831611</td>
						<td>428.6473185</td>
					</tr>
					<tr>
						<td>2014</td>
						<td>9.57201597</td>
						<td>463.6399279</td>
					</tr>

				</table>
			</div>


			<div id="imageView">
				<div class="page-header" style="text-align: center;">
					<h3>医疗支出占国内生产总值比重&人均医疗支出</h3>
					<br>
					<h3>Health Expenditure,Total as Percentage of GDP and Health Expenditure per Capital</h3>
				</div>

				<div class="panel" style="margin-top:1.5em">
					<!--<div style="text-align: right;">单位: %/元</div>-->
					<div id="main" style="width: 100%;height:400px;"></div>
				</div>
			</div>
			<div style="color: #959595; margin-top: 1.5em;">*此数据仅展现最近五年，若需全部数据请点击&nbsp;<a href="#" class="btn btn-info btn-xs">
				<span class="glyphicon glyphicon-save"></span> 下载
			</a></div>

			<!-- <div style="text-align: right;"><div id="page"></div></div> -->
		</div>
	</body>
	<script>
		$(function() {
			$('#all').hide()
			$('#imageView').hide();
			$('#imageView2').hide();
			$('#tableTag').attr('class', 'active');
		})

		function showTable() {
			$('#all').hide()
			$('#tableView').show();
			$('#tableView2').show();
			$('#imageView').hide();
			$('#imageView2').hide()
			$('#tableTag').attr('class', 'active');
			$('#imageTag').removeClass('active');
			$('#first').show()
			$('#second').show()
		}

		function showImage() {
			$('#all').show()
			$('#imageView').show();
			$('#tableView').hide();
			$('#tableView2').hide();
			$('#imageView2').show();
			$('#imageTag').attr('class', 'active');
			$('#tableTag').removeClass('active');
			$('#first').hide()
			$('#second').hide()
		}



		var all = {
			"data": [
				// 11
			    [6.11631076,5.01934025,7.07978092,6.20353532,8.46232483,6.93394326,6.89409977,6.37415759,5.83432657,5.46905767,7.95350493,8.70154867,7.04485118,8.49586245,8.27979357,8.49615182],
                [5.33503501,6.24878186,7.24456053,6.88449165,6.90181545,7.4318989,8.24785313,6.55480303,7.09033823,5.83283431,6.83334032,10.08880983,8.50861648,9.06859821,7.85048555,9.57831611],
                [5.88310543,6.37929421,8.44291326,6.35024637,6.41654268,7.41091154,7.80324176,5.88069354,6.55211709,5.56500913,6.47637457,10.36881192,8.05404755,9.23388628,7.40078093,9.57201597],

				// 11
                [166.2279289,514.22144,274.9733732,494.7032382,310.0002215,884.3635966,726.5228298,455.8426296,453.8766165,255.2853935,243.7299768,304.7540901,628.1035841,1519.549813,922.784017,248.7893982],
                [219.2738575,902.6732824,488.2120682,867.7452921,456.6293165,1410.036589,1143.851235,739.3775279,828.6518049,482.9457049,312.2201208,541.0249331,1377.726433,2083.059184,1019.851688,428.6473185],
                [272.2042915,1248.279632,661.8465273,910.2837803,457.6649363,1378.521202,1050.334391,920.7037654,1063.421183,556.8096847,353.9253425,632.9248415,1454.81013,2160.746701,1036.623859,463.6399279],



			],
			"countrys": ["阿尔巴尼亚","爱沙尼亚","保加利亚","波兰","黑山","捷克共和国","克罗地亚","拉脱维亚","立陶宛","罗马尼亚","马其顿","塞尔维亚","斯洛伐克","斯洛文尼亚","匈牙利","波黑"],
			"years": ["2005年", "2010年", "2014年"]
		};

		var option = {
			timeline: {
				axisType: 'category',
				autoPlay: true,
				playInterval: 2000,
				data: all.years
			},
			options: [{
					tooltip: {
						trigger: 'axis'
					},
                title:{
                    subtext:'数据来源'
                },
                calculable: true,
                grid: {
                    top: 50,
                    bottom: 100
                },
					legend: {
						data: ['医疗支出占国内生产总值比重(%)', '人均医疗支出(元)']
					},
					xAxis: [{
						type: 'category',
						axisLabel: {
							interval: 0
						},
						data: all.countrys
					}],
					yAxis: [{
						type: 'value',
						name: '%'
					},{
                        type: 'value',
                        name: '元'
                    }],
					//05
					series: [{
						name: '医疗支出占国内生产总值比重(%)',
						type: 'bar',
						data: all.data[0]
					}, {
						name: '人均医疗支出(元)',
						type: 'bar',
                        yAxisIndex: 1,
                        data: all.data[3]
					}
					]
				},
				//10
				{
					series: [{
						data: all.data[1]
					}, {
						data: all.data[4]
					}]
				},
				//14
				{
                    series: [{
                        data: all.data[2]
                    }, {
                        data: all.data[5]
                    }]
				},

			]
		};
		var myChart = echarts.init(document.getElementById('main'));
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>

</html>